<template>
  <div>


	<myheader></myheader>
	<section class="featured-block text-center">
		<div class="container">

            <br>
                        <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>


				<table>

                    <tr>
						<td>
							商品分类:
						</td>
						<td>
							<Select v-model="selected" :datas="category"></Select>
					
						</td>
					</tr>
					<tr>
						<td>
							商品名称:
						</td>
						<td>
							<input type="text" v-model="name" placeholder="请输入商品名称">
					
						</td>
					</tr>
					<tr>
						<td>
							商品价格:
						</td>
						<td>
							<input type="number" v-model="price">
					
						</td>
					</tr>

					<tr>
						<td>
                            颜色:
                        </td>
						<td>
                            <input type="text" v-model="color">
						</td>
					</tr>
                    <tr>
						<td>
                            号码:
                        </td>
						<td>
                            <input type="text" v-model="size">
						</td>
					</tr>
                    <tr>
						<td>
                            季节:
                        </td>
						<td>
                            <input type="text" v-model="season">
						</td>
					</tr>
                    <tr>
						<td>
                            
                        </td>
						<td>
                            <Button @click="submit">添加商品</Button>
						</td>
					</tr>
				</table>

		</div>
	</section>
	<myfooter></myfooter>
  </div>
</template>
<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

//导入文件
import {config,formatXml} from '../config.js'


export default {
  data () {
    return {
        msg: "这是一个变量",
        //商品数据
        categorylist:[],
        //分类默认选中
        selected:'手机',
        //名称
        name:'',
        price:0,
        color:'',
        size:'',
        season:'',
        //商品分类
        category:['手机','电脑','电器'],
        // //反向获取id
        // goods_dict:{},

	    //面包屑导航变量
        datas:[{title:'首页',route:{name:'index'}},{title:'添加商品'}]
        
    }
  },
  //注册组件标签
  components:{
	  'myheader':myheader,
		'myfooter':myfooter,

  },
  mounted:function(){

      //调用分类接口
      this.get_category();


},
  methods:{

        //获取商品分类
     get_category:function(){

                     //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/categorylist/').then((result)=>{

                console.log(result);

                var mycate = [];

                //二次处理
                for(let i=0;i<result.data.length;i++){

                    mycate.push(result.data[i]['name']);

                }

                //赋值操作
                this.category = mycate;
                this.categorylist = result.data

        
			});




     },



      //添加商品
      submit:function(){

          //获取分类对应id
          var categorylist = this.categorylist

          for(let i=0;i<this.categorylist.length;i++){

              if(categorylist[i]['name'] == this.selected){
                  var cid =categorylist[i]['id']
              }
          }

          //将普通字段转换为json
          var param = {};

          param['color'] = this.color;
          param['size'] = this.size
          param['season'] = this.season;

          console.log(param)

          //转换字符串
          param = JSON.stringify(param)

          console.log(param);

            //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/insertgoods/',{params:{name:this.name,price:this.price,cid:cid,params:param}}).then((result)=>{

                console.log(result)

                this.$Message(result.data.message);
            
			});

      },


  }
}
</script>
<style>
td{
	padding:10px
}
.imgcode {
	cursor: pointer;
}
</style>
